<script setup lang="ts">
import { ref, computed, onMounted, onUnmounted } from 'vue'

// 定义props
const props = defineProps<{
  modelValue: string | boolean
  options?: {
    label: string
    value: string | boolean
  }[]
  placeholder?: string
}>()

// 定义emits
const emit = defineEmits<{
  'update:modelValue': [value: string | boolean]
}>()

// 控制下拉菜单显示/隐藏的状态变量
const isOpen = ref(false)

// 默认选项
const defaultOptions = computed(() => props.options || [
  { label: '是', value: '是' },
  { label: '否', value: '否' }
])

// 获取当前选中的选项
const selectedOption = computed(() => {
  return defaultOptions.value.find(option => option.value === props.modelValue)
})

// 切换下拉菜单
const toggleDropdown = () => {
  isOpen.value = !isOpen.value
}

// 关闭下拉菜单
const closeDropdown = () => {
  isOpen.value = false
}

// 选择选项
const selectOption = (value: string | boolean) => {
  emit('update:modelValue', value)
  closeDropdown()
}

// 点击外部关闭下拉菜单
const handleClickOutside = (event: Event) => {
  const target = event.target as HTMLElement
  if (!target.closest('.dropdown-container')) {
    closeDropdown()
  }
}

// 添加点击外部事件监听
onMounted(() => {
  document.addEventListener('click', handleClickOutside)
})

// 移除事件监听
onUnmounted(() => {
  document.removeEventListener('click', handleClickOutside)
})
</script>

<template>
  <div class="dropdown-container relative inline-block w-full md:w-auto">
    <button 
      type="button" 
      @click="toggleDropdown"
      class="w-full px-4 py-2 text-left text-sm font-medium rounded-lg border border-gray-300 bg-white text-gray-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all duration-300"
    >
      <span v-if="selectedOption">{{ selectedOption.label }}</span>
      <span v-else class="text-gray-400">{{ placeholder || '请选择...' }}</span>
      <svg 
        class="w-4 h-4 absolute right-3 top-1/2 transform -translate-y-1/2 transition-transform duration-300" 
        :class="{ 'rotate-180': isOpen }" 
        xmlns="http://www.w3.org/2000/svg" 
        fill="none" 
        viewBox="0 0 24 24" 
        stroke="currentColor"
      >
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
      </svg>
    </button>
    
    <div 
      v-if="isOpen"
      class="absolute z-10 left-0 right-0 mt-1 bg-white rounded-lg shadow-lg border border-gray-200 overflow-hidden max-h-80 overflow-y-auto scrollbar-thin scrollbar-thumb-gray-300 scrollbar-track-transparent"
      style="scrollbar-width: thin; scrollbar-color: #cbd5e0 transparent;"
    >
      <div 
        v-for="(option, index) in defaultOptions" 
        :key="index"
        @click="selectOption(option.value)"
        class="px-4 py-2 text-sm hover:bg-blue-50 cursor-pointer transition-colors duration-200"
        :class="modelValue === option.value ? 'bg-blue-100 text-blue-700' : 'text-gray-700'"
      >
        {{ option.label }}
      </div>
    </div>
  </div>
</template>

<style scoped>
/* 下拉菜单动画 */
.dropdown-container > div {
  animation: slideDown 0.15s ease-out;
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-5px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
</style>